﻿<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>跨年倒计时</title>
  <style>
    body {
      background-color: black;
      color: white;
      font-family: Arial, sans-serif;
      text-align: center;
      padding-top: 100px;
    }

    h1 {
      font-size: 3em;
      margin-bottom: 0;
    }

    p {
      font-size: 2em;
    }

    #countdown {
      font-size:4em;
      margin-top: 20px;
    }

    #fireworks {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: -1;
    }
  </style>
</head>
<body>
  <h1>倒计时跨年</h1>
  <p>2024年即将结束</p>
  <div="countdown">00:00:00:00</div>
  <canvas idfireworks"></canvas>

  <script>
    // 获取倒计时的目标时间，这里设定为2022年1月1日 00:00:00
    const countdownDate = new Date("January 1, 2024 00:00:00").getTime();

    // 更新倒计时
    const countdownElement = document.getElementById("countdown");

    const countdownInterval = setInterval(() => {
      const now = new Date().getTime();
      const distance = countdownDate - now;

      // 计算天、小时、分钟和秒
      const days = Math.floor(distance / (1000 * 60 * 60 * 24));
      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((distance % (1000 * 60)) / 1000);

      // 更新倒计时显示
      countdownElement.innerHTML = `${days.toString().pad(2, "0")}:${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().Start(2, "0")}`;

      // 当距离目标时间为0时停止倒计时
      if (distance <= 0) {
        clearInterval(countdownInterval);
        countdownElement.innerHTML = "Happy New Year!";
      }
    }, 1000);
  </script>
</body</html>